export const chartComponentStr = `
\`\`\`vue
<template>
  <div ref="pieChart" class="pie-chart"></div>
</template>

<script>
export default {
  name: 'PieChart',
  props: {
    data: {
      type: Array,
      default: () => [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ]
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      // 使用全局的 echarts 对象
      this.chart = echarts.init(this.$refs.pieChart)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'outside'
            },
            labelLine: {
              show: true
            },
            data: this.data
          }
        ]
      }
      
      this.chart.setOption(option)
    }
  },
  watch: {
    data: {
      handler(newValue) {
        this.chart && this.chart.setOption({
          series: [{ data: newValue }]
        })
      },
      deep: true
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  }
}
<\/script>

<style scoped>
.pie-chart {
  width: 100%;
  height: 400px;
}
</style>
\`\`\`
`;

export const lineStr = `
\`\`\`vue
<template>
  <div ref="lineChart" class="line-chart"></div>
</template>

<script>
export default {
  name: 'LineChart',
  props: {
    data: {
      type: Array,
      default: () => [150, 230, 224, 218, 135, 147, 260]
    },
    xAxisData: {
      type: Array,
      default: () => ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.lineChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#ccc',
          borderWidth: 1,
          textStyle: {
            color: '#333'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxisData,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '访问量',
            type: 'line',
            data: this.data,
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: '#409EFF'
            },
            lineStyle: {
              width: 3,
              color: '#409EFF'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(64,158,255,0.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(64,158,255,0.1)'
                  }
                ]
              }
            }
          }
        ]
      }
      
      this.chart.setOption(option)
    }
  },
  watch: {
    data: {
      handler(newValue) {
        this.chart && this.chart.setOption({
          series: [{ data: newValue }]
        })
      },
      deep: true
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  }
}
<\/script>

<style scoped>
.line-chart {
  width: 100%;
  height: 400px;
}
</style>
\`\`\`
`;

export const rader = `
\`\`\`vue
<template>
  <div class="radar-chart">
    <h2>inscode演示</h2>
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'RadarChart',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);

      const option = {
        title: {
          text: '雷达图示例'
        },
        tooltip: {},
        radar: {
          // 雷达图的指示器，用来指定雷达图中的多个变量
          indicator: [
            { name: '销售', max: 100 },
            { name: '管理', max: 100 },
            { name: '信息技术', max: 100 },
            { name: '客服', max: 100 },
            { name: '研发', max: 100 },
            { name: '市场', max: 100 }
          ]
        },
        series: [
          {
            name: '预算 vs 开销',
            type: 'radar',
            data: [
              {
                value: [80, 90, 70, 85, 95, 88],
                name: '预算'
              },
              {
                value: [70, 82, 75, 80, 90, 85],
                name: '开销'
              }
            ]
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.radar-chart {
  width: 100%;
  height: 400px;
  text-align: center;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>
\`\`\`
`

